import React,{useEffect,useState} from 'react'
import {get_know_item,getknow} from '../../api/knowledge'
import style from './css/knowledge.module.scss'
import { ForkOutlined,EyeOutlined } from '@ant-design/icons/lib/icons'
interface Itemst {
  publishAt?: any;
  status?: string;
  cover: string
  title?: string
  summary?: string
  id?: string
  views?:number
}
function Knowledge_detail() {
  const [conItem,setConItem]=useState([[]])
  const [know_id_list,set_know_id_list]=useState<any>([])
  useEffect(()=>{
      let url=window.location.pathname;
      let str=url.split('/')
      console.log(url,str[3]);
      get_know_item(str[3]).then(res=>{
        set_know_id_list(res.data.data)
      })
      getknow().then((res)=>{
        setConItem(res.data.data)
      })
    },[])
    const toKnow=()=>{
      window.open(`/index/baseKnow_atricde/${know_id_list.id}/${know_id_list.children[0].id}`,'_blank')
    }
  return (
    <div className={style.detailmain}>
       
         <div className={style.leftbox}>
         <p className={style.Headword}>知识小册 / {know_id_list.title}</p>
         <h3>{know_id_list.title}</h3>
         <div className={style.Detailbox}>
             <img src={know_id_list.cover} alt="" className={style.imgtt}/>
             <h2>{know_id_list.title}</h2>
             <p>{know_id_list.summary}</p>
             <p>{know_id_list.order} 次阅读{know_id_list.updateAt}</p>
            <button className={style.btn} onClick={toKnow}>开始阅读</button>
            <p>敬请期待</p>
         </div>
         </div>
         <div className={style.rightbox}>
          <h2>其他知识笔记</h2>
         {
         conItem[0].map((items:Itemst,index:number) => {
              return <div className={style.p} key={index}>
                  <div className={style.leftlist}>
                    <ul className={style.ulst}>
                      <li>
                           {items.title}
                      </li>
                      <li>
                        {items.summary}
                      </li>
                      <li>
                      <span>{items.views}<EyeOutlined /> </span> <span><ForkOutlined /> 分享</span> 
                      </li>
                    </ul>
                 
                    </div>
                  <div className={style.rightlist}><img src={items.cover} alt=""  className={style.imgitem}/></div>
                  <div>
                  </div>
              </div>
          })
      }
         </div>
    </div>
  )
}

export default Knowledge_detail
